/*
 * @Author: viivLgr
 * @Date: 2018-06-07 15:55:13
 * @Last Modified by: viivLgr
 * @Last Modified time: 2018-06-07 16:53:36
 */
import React        from 'react';
import {Link}       from 'react-router-dom';

import PageTitle    from 'component/page-title/index.jsx';
import TableList    from 'util/tableList/index.jsx';

import Product      from 'service/product-service.jsx';
import Util         from 'util/util.jsx';

import './index.scss';

const _product  = new Product();
const _util     = new Util();

class CategoryList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            parentCategoryId : this.props.match.params.categoryId || 0
        }
    }
    componentDidMount(){
        this.loadList();
    }
    componentDidUpdate(prevProps, prevState){
        let oldPath = prevProps.location.pathname,
            newPath = this.props.location.pathname,
            newId = this.props.match.params.categoryId;
        if(oldPath !== newPath){
            this.setState({
                parentCategoryId: newId
            }, () => {
                this.loadList();
            });
        }
    }
    loadList(){
        _product.getCategoryList(this.state.parentCategoryId).then(res => {
            this.setState({
                list: res
            });
        }, errMsg => {
            this.setState({
                list: []
            });
            _util.errorTips(errMsg);
        });
    }
    // 更新品类的名字
    onUpdateName(categoryId, categoryName){
        let newName = window.prompt('请输入新的品类名称', categoryName);
        if(newName){
            _product.updateCategoryName({
                categoryId: categoryId,
                categoryName: newName
            }).then(res => {
                _util.successTips(res);
                this.loadList();
            }, errMsg => {
                _util.errorTips(errMsg);
            })
        }
    }
    render() {
        return (
            <div id="page-wrapper">
                <PageTitle title="品类列表">
                    <div className="page-header-right">
                        <Link to="/product-category/add" className="btn btn-primary">
                            <i className="fa fa-plus"></i>
                            <span>添加品类</span>
                        </Link>
                    </div>
                </PageTitle>
                <div className="row">
                    <div className="col-md-12">
                        <p>父品类ID：{this.state.parentCategoryId}</p>
                    </div>
                </div>
                <TableList tableHeaders={['品类ID', '品类名称', '操作']}>
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <tr key={index}>
                                    <td>{item.id}</td>
                                    <td>{item.name}</td>
                                    <td>
                                        <a className="opera" onClick={() => this.onUpdateName(item.id, item.name)}>修改名称</a>
                                        {
                                            item.parentId === 0
                                            ? <Link to={`/product-category/index/${item.id}`}>查看子品类</Link>
                                            : null
                                        }
                                    </td>
                                </tr>
                            )
                        })
                    }
                </TableList>
            </div>
        );
    }
}
export default CategoryList;